<!--选择当前登录角色可以发放的优惠券-->
<template>
  <Modal
    :styles="{top: '20px',bottom:'20px',width:'90%'}"
    :scrollable=false :closable=true v-model="isShow" :mask-closable="false" @on-visible-change="modalStatus"
    @on-ok="returnCoupon" >

<!--    <div style="padding-bottom: 2rem">-->
<!--      <Row style="text-align: left;padding: 0.25rem 0px;">-->
<!--        <i-col span="5">-->
<!--          <Select placeholder="模板类型" v-model="couponSearch.couponType" :clearable=true>-->
<!--            <Option v-for="item in couponTypeDict" :value="item.value" :key="item.value">{{ item.name }}</Option>-->
<!--          </Select>-->
<!--        </i-col>-->
<!--        <i-col span="2" offset="1">-->
<!--          <Button type="primary" icon="search" @click="selectCouponsSearch">过滤查询</Button>-->
<!--        </i-col>-->
<!--      </Row>-->
      <!--表格和分页-->
      <Table stripe border :columns="tableCouponTitles" :data="couponList" :row-class-name="rowClass"
             class="base_table" :max-height="560" style="margin: 1rem 0"
             no-data-text="暂无数据"></Table>

<!--      <div style="float: right;">-->
<!--        <Page :total="page.total" :page-size="page.stepNumber"-->
<!--              :current="page.currentPage" @on-change="changePage" :page-size-opts="[40,60,80,120]"-->
<!--              @on-page-size-change="sizeChange" show-sizer show-elevator/>-->
<!--      </div>-->
<!--    </div>-->
  </Modal>
</template>


<script>

    export default {
        name: "CouponSelectList",
        props: {
            couponListShow: {
                type: Boolean,
                default: false,
                require: true
            },
        },
        data() {
            return {
                isShow: false,
                // couponTypeDict: this.$store.getters.dictionaries.couponTypeDict,
                // couponSearch: {
                //     couponType: ""
                //
                // },
                couponList: [],
                currentChoose: '',
                currentCoupon: -1,
                tableCouponTitles: [
                    {
                        title: '选择',
                        key: 'id',
                        width: 70,
                        align: 'center',
                        render: (h, params) => {
                            let id = params.row.id;
                            let flag = false;
                            if (this.currentChoose === id) {
                                flag = true
                            } else {
                                flag = false
                            }
                            let self = this
                            return h('div', [
                                h('Radio', {
                                    props: {
                                        value: flag,
                                        disabled:params.row.state !== 0
                                    },
                                    on: {
                                        'on-change': () => {
                                            self.currentChoose = id;
                                            self.currentCoupon = params.index;
                                        }
                                    }
                                })
                            ])
                        }
                    },
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },

                    {
                        title: '优惠券标题',
                        key: 'title',
                        width: 200,
                        render:(h, params) => {
                            return (<div>{params.row.title}</div>);
                        }
                    },
                    {
                        title: '优惠券类型',
                        key: 'type',
                        width: 120,
                        align: 'center',
                        render: (h, params) => {
                            let couponTypeDict = this.couponTypeDict;
                            let type = params.row.type;
                            let typeItem = couponTypeDict.filter(item=>item.value===type);
                            let isPrimary = type===200;
                            return (
                                <div>
                                    <tag color={isPrimary?'green':'magenta'}>{isPrimary?'折扣券':'现金抵扣券'}</tag>
                                </div>
                            );
                        },
                    },
                    {
                        title: '发放方式',
                        key: 'state',
                        width: 110,
                        render: (h, params) => {
                            return h('div', '后台发放');
                        },
                        align: 'center'
                    },
                    {
                        title: '启用状态',
                        key: 'state',
                        width: 110,
                        render: (h, params) => {
                            let isOpened = params.row.state === 0;
                            let statusName = isOpened?'生效中':'已禁用';
                            return (
                                <div>
                                    <badge status={isOpened?'processing':'default'} text={statusName} />
                                </div>
                            );
                        },
                        align: 'center'
                    },
                    {
                        title: '折扣',
                        key: 'discount',
                        align: 'center',
                        width: 180,
                        render: (h, params) => {
                            let discountValue = "";
                            let couponType = params.row.type;
                            if(couponType===100){
                                discountValue = '$'+params.row.faceValue;
                            }else if(couponType == 200){
                                discountValue = (100-params.row.discountRate*100).toFixed(1)+"%";
                            }
                            return h('div','满 $'+params.row.threshold+' 减 '+ discountValue)
                        }
                    },
                    {
                        title: '有效期',
                        key: 'validityPeriod',

                        align: 'center',
                        render: (h, params) => {
                            switch(params.row.validityPeriodType){
                                case 1:
                                    if(params.row.effectiveTime){ //有生效时间
                                        let days = 0;
                                        let now = new Date().getTime();
                                        if(params.row.effectiveTime > now){ //还没到生效时间
                                            days = (params.row.validityPeriod/24/3600/1000).toFixed(0);
                                            return(
                                                <div>
                                                    <p style="color:#757575;font-size:0.8em">$tiyBJTime(params.row.effectiveTime)}生效</p>
                                                    <span>有效期{days}天</span>
                                                </div>
                                            );
                                        }
                                        let endTimeStamp = params.row.validityPeriod+params.row.effectiveTime;
                                        if (endTimeStamp < now){
                                            return h('strong','已过期');
                                        }

                                        let endTime = this.$tiyBJTime(endTimeStamp);
                                        days = ((endTimeStamp-now)/24/3600/1000).toFixed(0);
                                        return(
                                            <div>
                                                <p style="color:#757575;font-size:0.8em">{endTime}失效</p>
                                                <span>仅剩{days}天</span>
                                            </div>
                                        );
                                    } else { //即时起效
                                        let days = (params.row.validityPeriod /24/3600/1000).toFixed(0);
                                        return (<div><span>获取后{days}天内有效</span></div>);
                                    }
                                    break;
                                case 2:
                                    return (<div><span>当月有效</span></div>);
                                    break;
                                default :
                                    return (<div></div>);
                            }
                        }
                    },
                ],
                // page: {
                //     total: 1,
                //     startIndex: 0,
                //     stepNumber: 40,
                //     currentPage: 1,
                // }
            }
        },
        computed : {

            // couponDetailStateDict(){
            //     return this.$store.getters.dictionaries.couponDetailStateDict
            // },
            couponTypeDict(){
                return this.$store.getters.dictionaries.couponType
            },
            // couponDistriubtionMethodDict(){
            //     return this.$store.getters.dictionaries.couponDistriubtionMethod
            // }
        },
        methods: {

            init() {
                // this.page.total = 1;
                // this.page.startIndex = 0;
                // this.page.stepNumber = 40;
                // this.page.currentPage = 1;
                // this.couponSearch = {
                //     couponType:''
                // }

            },
            selectCouponsSearch() {
                this.init();
                this.webList();
            },

            changePage(page) {
                this.page.currentPage = page;
                this.webList();
            },
            sizeChange(p) {
                this.page.stepNumber = p;
            },
            modalStatus(status) {
                if (!status) {
                    this.$emit("hideCouponList")
                }
            },
            webList() {
                var self = this;
                self.$Spin.show();
                self.$apiCoupon.getCouponDefineByEmployee({
                    // "distributionType":200,
                    // "pageNum":self.page.currentPage,
                    // "pageSize":self.page.stepNumber
                }).then(function (response){
                    self.$Spin.hide();
                    if (response.success) {
                        self.couponList.splice(0, self.couponList.length);
                        let couponPage = response.result;
                        if(couponPage != null && couponPage.length > 0) {
                            // self.page.total = couponPage.total;
                            // self.page.stepNumber = couponPage.pageSize;
                            couponPage.forEach(
                                function (item) {
                                    self.couponList.push(item);
                                }
                            );
                        }
                    } else {
                        self.$Message.error(response.errorMessage);
                    }
                });

            },

            rowClass(row, index) {
                if (row.id == this.currentChoose) {
                    return 'row-selected';
                }
                return '';

            },
            returnCoupon() {

                if (this.currentCoupon != -1) {
                    this.$emit("receiveCouponData", this.couponList[this.currentCoupon])
                } else {
                    this.$Message.error('请选择优惠券模板!');
                }
            }
        },
        watch: {
            couponListShow: function (val) {
                if (val) {
                    this.webList();
                }
                this.isShow = val;
            }
        },


    }
</script>

<style scoped lang="less">
  .row-selected td {
    background-color: #2db7f5 !important;
    color: #a1b1e2 !important;
  }
</style>
